<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        body,ul,ol,li,img {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        #box {
            width: 500px;
            height: 300px;
            padding: 7px;
            /*background-color: red;*/
            border: 1px solid #ccc;
            margin: 100px auto;
            position: relative;
        }
        .ad {
            width: 500px;
            height: 300px;
            position: relative;
            overflow: hidden;
        }
        #box img {
            width: 500px;
        }
        .ad ul li{
            width: 500px;
            height: 300px;
            overflow: hidden;
            float: left;
        }
        .ad ul {
            position: absolute;
            left: 0;
            top: 0;
            width: 3000px;
        }
        .ad ul li.current {
            background: yellow;
        }
        .ad ol {
            position: absolute;
            right: 10px;
            bottom: 10px;
            line-height: 20px;
            text-align: center;
        }
        .ad ol li {
            float: left;
            width: 20px;
            height: 20px;
            background: #fff;
            border: 1px solid #ccc;
            margin-left: 10px;
            cursor: pointer;
        }
        .ad ol li.current {
            background: yellow;
        }
        #arr {
            display: none;
        }
        #arr span {
            width: 40px;
            height: 40px;
            line-height: 40px;
            position: absolute;
            /*left: 5px;*/
            top: 50%;
            margin-top: -20px;
            background-color: #000;
            cursor: pointer;
            text-align: center;
            font-weight: bold;
            font-family: '黑体';
            font-size: 30px;
            color: #fff;
            opacity: 0.3;
            border: 1px solid #fff;
        }
        #arr #left{
            left: 5px;
        }
        #arr #right {
            right: 5px;
            /*left: auto;*/
        }
    </style>
    <!--<script>-->
        <!--window.onload = function(){-->
            <!--// 1. 先获得要操作的对象-->
            <!--var box = document.getElementById("screen");-->
            <!--var ul = box.children[0];-->

<!--//            var play = function(){-->
<!--//                // 1. 先获得ul当前的位置-->
<!--//                var leader = ul.offsetLeft;-->
<!--//                var step = -10;-->
<!--//                leader = leader+step;-->
<!--//                ul.style.left = leader + 'px';-->
<!--//            }-->
            <!--// 2. 开启定时器-->
           <!--var timerId =  setInterval(play,100)-->

            <!--// 3.鼠标移入大盒子的时候，要暂时移动-->
            <!--box.onmouseover = function (){-->
                   <!--clearInterval(timerId);-->
            <!--}-->
            <!--// 4. 鼠标离开大盒子的时候，要重新开启定时器-->
            <!--box.onmouseout = function (){-->
                 <!--timerId=  setInterval(play,100);-->
            <!--}-->

            <!--function play(){-->
                <!--// 1. 先获得ul当前的位置-->
                <!--var leader = ul.offsetLeft;-->
                <!--var step = -10;-->

                <!--leader = leader+step;-->
                <!--if(leader >-1200){-->
                    <!--ul.style.left = leader + 'px';-->
                <!--}else{-->
                    <!--ul.style.left = "0px";-->
                <!--}-->
            <!--}-->
        <!--}-->
    <!--</script>-->
</head>
<body>
<div class="all" id="box">
    <div class="ad">
        <ul id="imgs">
            <li><img src="images/01.jpg" alt=""/></li>
            <li><img src="images/02.jpg" alt=""/></li>
            <li><img src="images/03.jpg" alt=""/></li>
            <li><img src="images/04.jpg" alt=""/></li>
            <li><img src="images/01.jpg" alt=""/></li>
        </ul>
    <ol></ol>
    </div>
    <div id="arr"><span id="left">&lt;</span><span id="right">&gt;</span></div>
</div>
<script>
    // 轮播图的大体思路
    /**
     * 1. 根据图片的个数(也就是li标签的个数)动态的生成小方块
     * 2. 鼠标移入小方块，当前小方块的背景颜色变成黄色，其它的变成无色
     * 3. 鼠标移入小方块，要显示对应小方块编号的图片，也就是让ul移动到当前小方块索引个图片宽度的距离
     * 4. 鼠标移入大盒子显示左右按钮，鼠标离开大盒子，隐藏左右按钮
     * 5. 给右侧按钮注册事件，单击一次移动一张图片(也就是让ul移动一张图片的宽度的距离)
     * 6. 单击右侧按钮的同时，让小方块的颜色和按钮的单击同步起来
     * 7. 左侧按钮的做法同上
     * 8. 让图片的索引 小方块的索引和鼠标移入小方块的索引同步起来
     * 9. 开启自动轮播(每间隔1秒移动一张图片，其实就相当于每间隔1秒钟单击一次右按钮)
     */
    //1,先获取要操作的对象
    var box = document.getElementById("box");
    var ad = box.children[0];
    var ul = document.getElementById("imgs");
    var lis = ul.children;
    var ol = ad.children[1];
    var arr = document.getElementById("arr");
    var left = document.getElementById("left");
    var right = document.getElementById("right");
    var imgWidth = ad.offsetWidth;//一张图片的宽度
    //2,动态生成小方块
    for(var i=0;i<lis.length;i++){//因为要生成多个小方块，而且还要设置他们的样式，所以用for循环实现
        var li = document.createElement("li");//小方块的个数和图片数量是一样的，所以用图片的长度来控制小方块的数量
        ol.appendChild(li);//把小方块放到有序列表中
        li.innerHTML = i+1;//设置小方块里面的数字编号。因为不能为0从1开始，所以是i+1，而且又不是获取文本，所以这里为了兼容性，用html最合适
    }
    //3，鼠标移入让小方块变色，也就是让让他们拥有current类名就可以
    var olLis = ol.children;
    olLis[0].setAttribute("class","current");//反正一打开页面总会有一个是变色的，那么我们就让第一个变色，比较方便
    for(var j=0;j<olLis.length;j++){//每个被鼠标移入的小方块都要变色，所以还是要for循环实现
        olLis[j].setAttribute("index",j);//给每个方块一个索引值
        //设置变色之前，要清除之前的颜色，这样就不容易出现错误,依然需要一个个清除，所以还是要用for循环来实现
        olLis[j].onmouseover = function () {
            empty();
            this.setAttribute("class","current");
        }
        //让小方块的背景颜色和图片的切换同步，也就是说ul移动的图片数量正好等于小方块的索引
        var index = olLis[j].getAttribute("index");
        var target = -imgWidth*index;
        animate(ul,target);
    }




    // 封装了一个清除小方块颜色的函数
    function empty(){
        for(var k=0;k<olLis.length;k++){
            olLis[k].removeAttribute("class");
        }
    }



    /**
     * 封装了一个匀速移动动画的函数
     * @param obj
     * @param target
     */

    function animate(obj,target){
        clearInterval(obj.timerId);
        obj.timerId = setInterval(function(){
            var leader = obj.offsetLeft;
            var step =10;
            step = leader<target?step:-step;
            if(Math.abs(leader-target)>Math.abs(step)){
                leader += step;
                obj.style.left = leader +'px';
            }else{
                clearInterval(timerId);
                obj.style.left = target +'px';
            }
        },15)
    }




</script>
</body>
</html>